var vm = new Vue({
  el: '#container',
  data: {
    cols: 8,
    rows: 8,
    map: [],
    start: null,
    end: null
  },
  mounted: function () {
    this.createMap()
  },
  methods: {
    createMap: function () {
      var arr = []
      var flag = this.rows * this.cols / 2
      for (var i = 0; i < flag; i++) {
        var num = Math.floor(Math.random() * 15) + 1
        arr.push(num)
      }
      arr = arr.concat(arr)
      arr = _.shuffle(arr)
      for (var i = 0; i < this.rows; i++) {
        var colsArr = arr.splice(0, this.cols)
        this.map.push(colsArr)
      }
    },
    tapItem: function (row, col, item) {
      if (!this.map[row][col]) return
      var str = 'r' + row + 'l' + col
      if (!this.start) {
        this.start = {
          ref: str,
          r: row,
          c: col
        }
        this.$refs[str][0].classList.add('active')
      } else {
        var ref = this.start.ref
        if (str === ref) return
        var r = this.start.r
        var c = this.start.c
        var v1 = this.map[r][c]
        var v2 = this.map[row][col]
        if (v1 !== v2) {
          this.$refs[ref][0].classList.remove('active')
          this.$refs[str][0].classList.add('active')
          this.start = {
            ref: str,
            r: row,
            c: col
          }
        } else {
          this.end = {
            ref: str,
            r: row,
            c: col
          }
          this.linkable(this.start, this.end)
        }
      }
    },
    linkable: function (a, b) {
      var a = a
      var b = b
      var isKill = false
      var pt1
      var pt2
      var pt3
      var pt4
      if (!isKill) {
        for (var i = -1, len = this.rows; i <= len; i++) {
          pt1 = a
          pt2 = {r: i, c: a.c}
          pt3 = {r: i, c: b.c}
          pt4 = b
          if ((!this.isNull(pt2) && (pt2.r !== a.r)) || (!this.isNull(pt3) && (pt3.r !== b.r))) {
            continue
          } else if (this.link4pt(pt1, pt2, pt3, pt4)) {
            isKill = true
            break
          }
        }
      }
      
      if (!isKill) {
        for (var i = -1, len = this.cols; i <= len; i++) {
          pt1 = a
          pt2 = {r: a.r, c: i}
          pt3 = {r: b.r, c: i}
          pt4 = b
          if ((!this.isNull(pt2) && (pt2.c !== a.c)) || (!this.isNull(pt3) && (pt3.c !== b.c))) {
            continue
          } else if (this.link4pt(pt1, pt2, pt3, pt4)) {
            isKill = true
            break
          }
        }
      }
      
      if (isKill) {
        this.$refs[this.end.ref][0].classList.add('active')
        // this.map[this.start.r][this.start.c] = ''
        // this.map[this.end.r][this.end.c] = ''
        this.map[this.start.r].splice(this.start.c, 1, '')
        this.map[this.end.r].splice(this.end.c, 1, '')
        this.start = null
        this.end = null
      } else {
        this.$refs[this.start.ref][0].classList.remove('active')
        this.$refs[this.end.ref][0].classList.add('active')
        this.start = this.end
        this.end = null
      }
    },
    isNull: function (pt) {
      return (this.map[pt.r] && this.map[pt.r][pt.c]) ? false : true
    },
    link4pt: function (pt1, pt2, pt3, pt4) {
      return this.link2pt(pt1, pt2) && this.link2pt(pt2, pt3) && this.link2pt(pt3, pt4)
    },
    link2pt: function (a, b) {
      var a = a
      var b = b
      var temp
      var canLink = true
      if (a.r > b.r || a.c > b.c) {
        temp = a
        a = b
        b = temp
      }

      if (a.r === b.r) {
        for (var i = a.c + 1, len = b.c - 1; i <= len; i++) {
          if (this.map[a.r] && this.map[a.r][i]) {
            canLink = false
            break
          }
        }
      } else if (a.c === b.c) {
        for (var i = a.r + 1, len = b.r - 1; i <= len; i++) {
          if (this.map[i] && this.map[i][a.c]) {
            canLink = false
            break
          }
        }
      }

      return canLink
    }
  }
})